<template>
  <div class="box">
    <div class="artical">
      <i class="el-icon-document"></i> <span class="title">最近文章</span>
      <ul>
        <li v-for="i in articalList" :key="i._id" @click="toArtical(i._id + 'WOWO')">
          {{ i.t }}
        </li>
      </ul>
    </div>
    <div class="blogInfo">
      <i class="el-icon-data-analysis"></i> <span class="title">博客信息</span>
      <p>发布文章数量：{{blogNum}}</p>
    </div>
    <div class="worklist">
      <i class="el-icon-folder-checked"></i> <span class="title">备忘录</span>
      <ul>
        <li v-for="i in workList" :key="i._id" @click="toNote"><span v-if="!i.state">未完成：</span><span v-else>已完成：</span>{{i.content}}</li>
      </ul>
      <p v-if="workList.length==0" style="margin-top:10px">您还未建立事务哟</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articalList: [],
      blogNum: "",
      workList: [],
    };
  },
  methods: {
    toArtical(id) {
      this.$router.replace("/home/artical/" + id).catch(()=>console.log())
      location.reload()
    },
    toNote(){
      this.$router.push('/home/notes').catch(()=>console.log())
    }
  },
  mounted() {
    this.$request({
      url: "/artical/getLatest",
    }).then((success) => {
      this.articalList = success.data;
    });
    this.$request({
      url:'/artical/all'
    }).then(success=>{
      this.blogNum=success.data.length
    });
    this.$request({
      url:'/note'
    }).then(success=>{
      this.workList=success.data
    })
  },
};
</script>

<style scoped>
.box {
  margin-top: 100px;
  padding-left: 6px;
  width: 200px;
  height: 700px;
  background-color: rgba(255, 255, 255, 0.3);
  color: #999aaa;
}
.artical {
  margin-top: 5px;
  height: 200px;
  padding: 10px 10px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border: 1px solid gainsboro;
  border-radius: 10px;
}
.title {
  font-size: 18px;
  color: rgb(105, 103, 103);
}
.blogInfo {
  margin: 50px 0;
  height: 150px;
  padding: 10px 10px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border: 1px solid gainsboro;
  border-radius: 10px;
}
.blogInfo p{
  margin: 10px 0;
}
.worklist {
  height: 200px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border: 1px solid gainsboro;
  border-radius: 10px;
}
.worklist ul li{
    margin: 10px 0;
  height: 30px;
  background-color: #f4f4f4;
  border-radius: 13px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  line-height: 30px;
  padding-left: 10px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis; /*省略号*/
  cursor: pointer;
}
.artical ul li {
  margin: 10px 0;
  height: 30px;
  background-color: #f4f4f4;
  border-radius: 13px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  line-height: 30px;
  padding-left: 10px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis; /*省略号*/
  cursor: pointer;
}
</style>